<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实现瀑布流</title>
		<style type="text/css">
			* {
			    margin: 0px;
			    padding: 0px;
			}
			
			#container {
			    position: relative;
			}
			
			.box {
			    float: left;
			    padding: 15px 0 0 15px;
			}
			
			.box .box_img {
			    padding: 10px;
			    border: 1px solid #cccccc;
			    border-radius: 5px;
			    box-shadow: 0px 0px 6px #cccccc;
			}
			
			.box_img img {
			    width: 172px;
			    height: auto;
			}
		</style>
	</head>
	<body>
		<div id="container">
		    <div class="box">
		        <div class="box_img" id="divBox">
		            <img src="images/pubuliu/1.jpg">
		        </div>
		    </div>
		</div>
		<script type="text/javascript">
		
		
			// 图片定位函数
			function setLocation(parent, child) {
			   // 获取当前 页面中 有多少张图片要展示并且获取图片的宽度
			   var vparent = document.getElementById(parent);
			   var childArray = getChild(vparent, child);
			   var imgWidth = childArray[0].offsetWidth;
			   // 计算当前一行能容纳多少列，也即一行能容纳多少个图片的展示
			   var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
			   // 将承载图片的父节点（其实这个时候就是 container）设置为指定行，并且居中显示。
			   vparent.style.cssText = "width : " + imgWidth * cols + "px;margin:0 auto;";
			
			   var boxHeightArray = [];
			   for (var i = 0; i < childArray.length; i++) {
			       if (i < cols) {
			           // 将第一行图片的距离页面顶端的高度记录在一个数组中
			           boxHeightArray[i] = childArray[i].offsetHeight;
			        } else {
			           // 获取到第一行中高度最小的那张图片，将其在数组中的下标获取到，然后将下一行的图片放置到高度最小的图片的下方，更新高度值。其实这很像一个计数功能，当我们知道了一行放置多少图片之后，当我们放满了第一行，将高度值存放在数组中，从第二行开始，寻找数组中最小的那个值，然后将图片放在这一列，更新数组值。 
			           var minHeight = Math.min.apply(null, boxHeightArray);
			           var minIndex = getIndex(boxHeightArray, minHeight);
			
			           childArray[i].style.position = "absolute";
			           childArray[i].style.top = minHeight + "px";
			           childArray[i].style.left = childArray[minIndex].offsetLeft + "px";
			           boxHeightArray[minIndex] = boxHeightArray[minIndex] + childArray[i].offsetHeight;
			        }
			    }
			}
			
			function getIndex(boxHeightArray, mingHeight) {
			    for (var i = 0; i < boxHeightArray.length; i++) {
			        if (boxHeightArray[i] == mingHeight) {
			            return i;
			        }
			    }
			}
			
			function getChild(parent, child) {
			    var contentArray = [];
			    var allcontent = parent.getElementsByTagName("*");
			    for (var i = 0; i < allcontent.length; i++) {
			        if (allcontent[i].className == child) {
			            contentArray.push(allcontent[i]);
			        }
			    }
			    return contentArray;
			}
			function check() {
			    var parent = document.getElementById("container");
			    var child = getChild(parent, "box");
			    
			    // lastContentHeight 的值是最后一张图片到页面顶部的距离
			    var lastContentHeight = child[child.length - 1].offsetTop;
			    // scrollTop 的值是当前正在显示的之前隐藏的部分
			    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			    // pageHeight 的值就是当前可见页面的高度
			    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
			
			    // 当我们下拉到最后一张图片的顶部的时候，开始动态加载图片
			    if (lastContentHeight <= scrollTop + pageHeight) {
			        return true;
			    }
			}
			
			// 当我们的页面滑动了，而且符合我们对动态加载图片的判断，即开始创建节点
			window.onscroll = function () {
			    var imgData = {
			        "data": [
			            {"src": "1.jpg"},
			            {"src": "2.jpg"},
			            {"src": "3.jpg"},
			            {"src": "4.jpg"},
			            {"src": "5.jpg"},
			            {"src": "6.jpg"},
			            {"src": "7.jpg"},
			            {"src": "8.jpg"}]
			    };
			
			    if (check()) {
			        var parent = document.getElementById("container");
			        for (var i = 0; i < imgData.data.length; i++) {
			
			            var box = document.createElement("div");
			            box.className = "box";
			            parent.appendChild(box);
			
			            var boximg = document.createElement("div");
			            boximg.className = "box_img";
			            box.appendChild(boximg);
			
			            var img = document.createElement("img");
			            img.src = "images/pubuliu/" + imgData.data[i].src;
			            boximg.appendChild(img);
			        }
			
			        setLocation("container", "box");
			    }
			}
			
			var divBox = document.getElementById("divBox");
			for(var i=0; i<8; i++){
				for(var j=1; j<=8; j++){
					var img = document.createElement("img");
			        img.src = "images/pubuliu/" + j + ".jpg";
					divBox.appendChild(img);
				}
			}
		</script>
	</body>
</html>
